<template>
	<div>
		  <el-form ref="form" :model="form" label-width="80px">
			  
			  
			  <el-form-item label="账单图片">
					<!-- <el-button size="mini" @click="isShow=true" type="primary">选择图片</el-button>
					 -->
					 <div style="width: 500px;">
						 <el-upload
						   class="upload-demo"
							:headers="headers"
							drag
							:on-success="successFile"
							:on-progress="progressFile"
							:action="action"
							:data="params"
						   >
						   <i class="el-icon-upload"></i>
						   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						   <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
						 </el-upload>
						 <el-progress :percentage="percent"></el-progress>
					 </div>
					 
			  </el-form-item>
			  <el-form-item>
				  <div style="display: flex;flex-wrap: wrap;">
					  <div style="position: relative;margin-right: 10px;" v-for="(el,i) in content" :key="i">
						  <img style="width: 100px;height: 100px;" :src="el" alt="">
						  <i @click="delImg(i)" class="el-icon-circle-close" style="font-size: 20px;position: absolute;top: 0;right:0;cursor: pointer;"></i>
					  </div>
				  </div>
			  </el-form-item>
			  <el-form-item >
				  <el-button type="primary" @click="confirm" size="small">确定</el-button>
			  </el-form-item>
		  </el-form>
		  
		  <el-dialog title="选择图片"
		  		:close-on-click-modal="false"
		  		:modal-append-to-body="false"
		  		:append-to-body="true"
		          :visible.sync="isShow"
		          width="1050px">
		  	 <div style="padding-bottom: 30px;">
		  		 <imgSys @getImgData="getImgData" />
		  	 </div>
		       
		  </el-dialog>
		  
	</div>
</template>

<script>
	import imgSys from '@/components/imgSys.vue';
	export default {
		data(){
			return {
				form:{
					
				},
				content:[],
				isShow:false,
				action:'',
				percent:0,
				params:{
					cid:"",
				},
				headers:{
					Authorization:""
				}
			}
		},
		props:{
			uplodeBillMid:{
				type:Number,
				default:0
			}
		},
		components:{
			imgSys
		},
		mounted() {
			if(this.$env=='dev'){
				this.action = this.$domain + '/uplodeFile/uplodeImageLocal'
			}else{
				this.action = this.$domain + '/uplodeFile/uplodeImage'
			}
			this.params.cid = sessionStorage.getItem('cid')
			this.headers.Authorization = sessionStorage.getItem('token')+'_'+sessionStorage.getItem('cid')
			
		},
		methods:{
			successFile(response, file, fileList){
				if(response.code==200){
					this.content.push(response.data.img_url)
				}else{
					this.$message.error(response.msg)
				}
				this.percent = 0
			},
			progressFile(event, file, fileList){
				let percent = event.percent
				this.percent = percent
			},
			confirm(){
				let params = {
					content:JSON.stringify(this.content),
					mid:this.uplodeBillMid
				}
				this.$post('/user/addUserBill',params,res=>{
					this.$emit('close')
				})
			},
			getImgData(val){
				this.content.push(val)
				this.isShow = false
			},
			delImg(i){
				this.content.splice(i,1)
			},
		}
	}
</script>

<style>
</style>